<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统维护中 - 图书管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #0d6efd;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .maintenance-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 500px;
            width: 90%;
            animation: fadeInUp 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .maintenance-icon {
            font-size: 4rem;
            color: var(--warning-color);
            margin-bottom: 1.5rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .maintenance-title {
            color: #333;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .maintenance-message {
            color: #666;
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        .admin-section {
            border-top: 1px solid #eee;
            padding-top: 2rem;
            margin-top: 2rem;
        }

        .admin-title {
            color: #333;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .password-input {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .password-input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        .disable-btn {
            background: linear-gradient(135deg, var(--primary-color), #0056b3);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
        }

        .disable-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(13, 110, 253, 0.3);
        }

        .disable-btn:disabled {
            opacity: 0.6;
            transform: none;
            box-shadow: none;
        }

        .status-check {
            margin-top: 1rem;
        }

        .status-check a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

        .status-check a:hover {
            text-decoration: underline;
        }

        .loading-spinner {
            display: none;
        }

        .loading-spinner.show {
            display: inline-block;
        }

        @media (max-width: 576px) {
            .maintenance-container {
                padding: 2rem 1.5rem;
            }
            
            .maintenance-title {
                font-size: 1.5rem;
            }
            
            .maintenance-message {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="maintenance-container">
        <!-- 维护图标 -->
        <div class="maintenance-icon">
            <i class="bi bi-tools"></i>
        </div>

        <!-- 维护标题 -->
        <h1 class="maintenance-title">系统维护中</h1>

        <!-- 维护消息 -->
        <div class="maintenance-message">
            <p>系统正在进行维护升级，暂时无法提供服务。</p>
            <p>我们正在努力改善用户体验，请稍后再试。</p>
            <p>如有紧急情况，请联系系统管理员。</p>
        </div>

        <!-- 管理员操作区域 -->
        <div class="admin-section">
            <div class="admin-title">
                <i class="bi bi-shield-lock-fill me-2"></i>管理员操作
            </div>
            
            <div class="mb-3">
                <input type="password" 
                       class="form-control password-input" 
                       id="adminPassword" 
                       placeholder="请输入管理员密码">
            </div>
            
            <button type="button" 
                    class="btn disable-btn" 
                    id="disableMaintenanceBtn">
                <span class="loading-spinner spinner-border spinner-border-sm me-2"></span>
                <i class="bi bi-unlock-fill me-2"></i>关闭维护模式
            </button>
            
            <div class="status-check">
                <a href="#" id="checkStatusBtn">
                    <i class="bi bi-arrow-clockwise me-1"></i>检查系统状态
                </a>
            </div>
        </div>
    </div>

    <!-- 提示消息容器 -->
    <div id="alertContainer" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999;"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        class MaintenancePage {
            constructor() {
                this.init();
            }

            init() {
                this.bindEvents();
                this.checkMaintenanceStatus();
            }

            bindEvents() {
                // 关闭维护模式按钮
                document.getElementById('disableMaintenanceBtn').addEventListener('click', () => {
                    this.disableMaintenanceMode();
                });

                // 检查状态按钮
                document.getElementById('checkStatusBtn').addEventListener('click', (e) => {
                    e.preventDefault();
                    this.checkMaintenanceStatus();
                });

                // 密码输入框回车事件
                document.getElementById('adminPassword').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        this.disableMaintenanceMode();
                    }
                });
            }

            async disableMaintenanceMode() {
                const password = document.getElementById('adminPassword').value.trim();
                const btn = document.getElementById('disableMaintenanceBtn');
                const spinner = btn.querySelector('.loading-spinner');

                if (!password) {
                    this.showAlert('请输入管理员密码', 'warning');
                    return;
                }

                // 显示加载状态
                btn.disabled = true;
                spinner.classList.add('show');

                try {
                    const response = await fetch('/api/system/config/maintenance/disable', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ password })
                    });

                    const result = await response.json();

                    if (result.result === 'SUCCESS' && result.data && result.data.success) {
                        this.showAlert('维护模式已关闭，正在跳转...', 'success');
                        
                        // 清空密码输入框
                        document.getElementById('adminPassword').value = '';
                        
                        // 2秒后跳转到系统配置页面
                        setTimeout(() => {
                            window.location.href = 'system.html';
                        }, 2000);
                    } else {
                        this.showAlert(result.data?.message || result.message || '密码错误', 'danger');
                    }
                } catch (error) {
                    this.showAlert('网络错误：' + error.message, 'danger');
                } finally {
                    btn.disabled = false;
                    spinner.classList.remove('show');
                }
            }

            async checkMaintenanceStatus() {
                try {
                    const response = await fetch('/api/system/config/maintenance/status');
                    const result = await response.json();

                    if (result.result === 'SUCCESS' && result.data) {
                        if (!result.data.maintenanceMode) {
                            this.showAlert('维护模式已关闭，正在跳转...', 'success');
                            setTimeout(() => {
                                window.location.href = 'system.html';
                            }, 1500);
                        } else {
                            this.showAlert('系统仍处于维护模式', 'info');
                        }
                    } else {
                        this.showAlert('检查状态失败：' + (result.message || '未知错误'), 'danger');
                    }
                } catch (error) {
                    this.showAlert('网络错误：' + error.message, 'danger');
                }
            }

            showAlert(message, type = 'info') {
                const container = document.getElementById('alertContainer');
                
                // 创建警告框
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
                alertDiv.style.cssText = 'min-width: 300px; margin-bottom: 10px;';
                
                const iconMap = {
                    success: 'bi-check-circle-fill',
                    danger: 'bi-exclamation-triangle-fill',
                    warning: 'bi-exclamation-triangle-fill',
                    info: 'bi-info-circle-fill'
                };
                
                alertDiv.innerHTML = `
                    <i class="bi ${iconMap[type]} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                
                container.appendChild(alertDiv);
                
                // 3秒后自动消失
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.remove();
                    }
                }, 3000);
            }
        }

        // 初始化维护页面
        document.addEventListener('DOMContentLoaded', () => {
            new MaintenancePage();
        });
    </script>
</body>
</html>